<!--
 * @Author: yankee liuchuan@yanxinfo.com
 * @Date: 2023-11-18 11:59:33
 * @LastEditors: cool panda
 * @LastEditTime: 2023-12-02 16:42:26
 * @FilePath: /AB/src/components/GlobalHeader/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="header-view">
    <nav class="header-nav">
      <router-link class="nav-li" to="/">
        <div class="log"><icons class="icon" name="logo" /></div>
      </router-link>
      <div class="link-nav">
        <router-link class="nav-li" to="/summer">夏季 2024</router-link>
        <router-link class="nav-li" to="/bedding">寝具</router-link>
        <router-link class="nav-li" to="/responsibility">责任</router-link>
        <router-link class="nav-li" to="/business">商业客户</router-link>
        <router-link class="nav-li" to="/ab">
          <div>
            <icons class="icon1" name="ab" />
          </div>
        </router-link>
      </div>
      <router-link class="nav-li1" to="/Sleep">睡眠学院</router-link>
    </nav>
  </div>
</template>

<script lang="ts" setup></script>

<style scoped lang="less">
.header-view {
  height: 100px;
}
.header-nav {
  min-width: 1090px;
  // box-shadow: rgba(146, 157, 154, 0.15) 0px 4px 10px 0px;
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100px;
  padding: 0 58px;
  display: flex;
  align-items: center;
  // backdrop-filter: blur(10px);
  .log {
    // width: 300px;
    margin-right: 10%;
    .icon {
      width: 200px;
      height: 20px;
      margin-right: 50px;
    }
  }
  .link-nav {
    flex: 1;
    display: flex;
    justify-content: flex-start;
  }
  .nav-li {
    &.router-link-active {
      font-weight: bold;
    }
    cursor: pointer;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    margin-right: 50px;
    .icon1 {
      width: 52px;
      height: 18px;
    }
  }
  .nav-li1 {
    &.router-link-active {
      font-weight: bold;
    }
    cursor: pointer;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
  }
}
</style>
